<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运粮曲网页稳定版</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            overflow-x: hidden;
        }
        
        .scene-container {
            transition: all 1.5s ease-in-out;
            position: relative;
            overflow: hidden;
        }
        
        .vintage-border {
            border: 8px solid #8B4513;
            border-radius: 4px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }
        
        .volume-meter {
            height: 20px;
            background: linear-gradient(to right, #4CAF50, #FFC107, #F44336);
            transition: width 0.3s ease;
        }
        
        .btn-vintage {
            background-color: #8B4513;
            color: #FFF8DC;
            border: 2px solid #A0522D;
            transition: all 0.3s ease;
        }
        
        .btn-vintage:hover {
            background-color: #A0522D;
            transform: translateY(-2px);
        }
        
        .period-indicator {
            font-family: 'Times New Roman', serif;
            letter-spacing: 1px;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <header class="bg-amber-900 text-amber-100 py-4 px-6 shadow-md">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">
                <i class="fas fa-wheat-alt mr-2"></i>运粮曲网页稳定版
            </h1>
            <div class="period-indicator bg-amber-800 px-4 py-2 rounded-full">
                当前场景: <span id="currentPeriod">平静期</span>
            </div>
        </div>
    </header>

    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="scene-container vintage-border mb-8 h-96 bg-cover bg-center" id="sceneView">
            <!-- 场景图片将通过JS动态加载 -->
        </div>
        
        <div class="bg-amber-50 p-6 rounded-lg shadow-inner mb-8">
            <h2 class="text-xl font-bold mb-4 text-amber-900">
                <i class="fas fa-cog mr-2"></i>场景控制
            </h2>
            
            <div class="mb-6">
                <h3 class="font-semibold mb-2 text-amber-800">音量检测</h3>
                <div class="bg-amber-100 p-3 rounded">
                    <div class="volume-meter rounded-full mb-2" id="volumeMeter" style="width: 0%"></div>
                    <div class="flex justify-between text-sm text-amber-900">
                        <span>0%</span>
                        <span id="currentVolume">0%</span>
                        <span>100%</span>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <h3 class="font-semibold mb-2 text-amber-800">场景切换阈值</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <span class="w-8 h-8 rounded-full bg-amber-200 flex items-center justify-center mr-2">
                                <i class="fas fa-leaf text-amber-700"></i>
                            </span>
                            <span>平静 → 发展期: ≥40%</span>
                        </li>
                        <li class="flex items-center">
                            <span class="w-8 h-8 rounded-full bg-amber-300 flex items-center justify-center mr-2">
                                <i class="fas fa-fire text-amber-700"></i>
                            </span>
                            <span>发展 → 高潮期: ≥70%</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-semibold mb-2 text-amber-800">其他设置</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <span class="w-8 h-8 rounded-full bg-amber-200 flex items-center justify-center mr-2">
                                <i class="fas fa-clock text-amber-700"></i>
                            </span>
                            <span>前5秒锁定平静期</span>
                        </li>
                        <li class="flex items-center">
                            <span class="w-8 h-8 rounded-full bg-amber-300 flex items-center justify-center mr-2">
                                <i class="fas fa-exchange-alt text-amber-700"></i>
                            </span>
                            <span>过渡时间: 1.5秒</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="flex justify-center space-x-4">
            <button class="btn-vintage px-6 py-3 rounded-full font-medium" id="startBtn">
                <i class="fas fa-play mr-2"></i>开始检测
            </button>
            <button class="btn-vintage px-6 py-3 rounded-full font-medium" id="resetBtn">
                <i class="fas fa-redo mr-2"></i>重置场景
            </button>
        </div>
    </main>

    <footer class="bg-amber-900 text-amber-100 py-4 px-6 text-center text-sm">
        <p>created by <a href="https://space.coze.cn" class="underline hover:text-amber-300">coze space</a></p>
        <p class="mt-1">页面内容均由 AI 生成，仅供参考</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 场景图片配置
            const scenes = {
                calm: 'https://s.coze.cn/image/2SXe01BfQ-8/',
                development: 'https://s.coze.cn/image/KJgQMNOtSdg/',
                climax: 'https://s.coze.cn/image/GSc6hH1It4o/'
            };
            
            // 元素引用
            const sceneView = document.getElementById('sceneView');
            const volumeMeter = document.getElementById('volumeMeter');
            const currentVolume = document.getElementById('currentVolume');
            const currentPeriod = document.getElementById('currentPeriod');
            const startBtn = document.getElementById('startBtn');
            const resetBtn = document.getElementById('resetBtn');
            
            // 状态变量
            let currentScene = 'calm';
            let isListening = false;
            let audioContext;
            let analyser;
            let microphone;
            let startTime;
            let isInitialLock = true;
            
            // 初始化场景
            sceneView.style.backgroundImage = `url(${scenes.calm})`;
            
            // 开始/停止音量检测
            startBtn.addEventListener('click', async function() {
                if (!isListening) {
                    try {
                        // 初始化音频上下文
                        audioContext = new (window.AudioContext || window.webkitAudioContext)();
                        analyser = audioContext.createAnalyser();
                        analyser.fftSize = 256;
                        
                        // 获取麦克风权限
                        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                        microphone = audioContext.createMediaStreamSource(stream);
                        microphone.connect(analyser);
                        
                        // 开始检测
                        isListening = true;
                        startTime = Date.now();
                        startBtn.innerHTML = '<i class="fas fa-stop mr-2"></i>停止检测';
                        updateVolume();
                        
                        // 5秒后解除初始锁定
                        setTimeout(() => {
                            isInitialLock = false;
                        }, 5000);
                    } catch (error) {
                        console.error('Error accessing microphone:', error);
                        alert('无法访问麦克风，请检查权限设置');
                    }
                } else {
                    // 停止检测
                    if (microphone) {
                        microphone.disconnect();
                    }
                    if (audioContext) {
                        audioContext.close();
                    }
                    isListening = false;
                    startBtn.innerHTML = '<i class="fas fa-play mr-2"></i>开始检测';
                    volumeMeter.style.width = '0%';
                    currentVolume.textContent = '0%';
                }
            });
            
            // 重置场景
            resetBtn.addEventListener('click', function() {
                currentScene = 'calm';
                sceneView.style.backgroundImage = `url(${scenes.calm})`;
                currentPeriod.textContent = '平静期';
                isInitialLock = true;
            });
            
            // 更新音量并检测场景切换
            function updateVolume() {
                if (!isListening) return;
                
                const bufferLength = analyser.frequencyBinCount;
                const dataArray = new Uint8Array(bufferLength);
                analyser.getByteFrequencyData(dataArray);
                
                // 计算平均音量
                let sum = 0;
                for (let i = 0; i < bufferLength; i++) {
                    sum += dataArray[i];
                }
                const average = sum / bufferLength;
                const volumePercent = Math.min(Math.round(average / 2.55), 100);
                
                // 更新UI
                volumeMeter.style.width = `${volumePercent}%`;
                currentVolume.textContent = `${volumePercent}%`;
                
                // 检测场景切换 (前5秒锁定平静期)
                if (!isInitialLock) {
                    if (currentScene === 'calm' && volumePercent >= 40) {
                        currentScene = 'development';
                        sceneView.style.backgroundImage = `url(${scenes.development})`;
                        currentPeriod.textContent = '发展期';
                    } else if (currentScene === 'development' && volumePercent >= 70) {
                        currentScene = 'climax';
                        sceneView.style.backgroundImage = `url(${scenes.climax})`;
                        currentPeriod.textContent = '高潮期';
                    } else if (volumePercent < 40 && currentScene !== 'calm') {
                        currentScene = 'calm';
                        sceneView.style.backgroundImage = `url(${scenes.calm})`;
                        currentPeriod.textContent = '平静期';
                    } else if (volumePercent < 70 && currentScene === 'climax') {
                        currentScene = 'development';
                        sceneView.style.backgroundImage = `url(${scenes.development})`;
                        currentPeriod.textContent = '发展期';
                    }
                }
                
                requestAnimationFrame(updateVolume);
            }
        });
    </script>
</body>
</html>